import React, {Component} from 'react';
import {Row, Col, Spin} from 'antd';
import "../css/delivery.css";
import app from '../AppMethod';
import {orderList} from "../value";
import moment from 'moment';

class Delivery extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data1: [],
            data2: [],
            data3: [],
            data4: []
        }
    };

    render() {
        return (
            <div style={{height:'100%'}}>
                <div className="deliveryTitle">
                    配送中
                </div>
                <Row className="deliveryContainer">
                    <Spin spinning={this.state.loading} wrapperClassName="deliverySpinContainer">
                        <Col span={7} className="deliveryItem">
                            <Row className="deliveryType">
                                自主物流
                            </Row>
                            <Row className="deliveryHeader">
                                <Col span={7} className="deliveryHeaderCol">物流单号</Col>
                                <Col span={5} className="deliveryHeaderCol">跟车人</Col>
                                <Col span={4} className="deliveryHeaderCol">司机</Col>
                                <Col span={3} className="deliveryHeaderCol">路线名</Col>
                                <Col span={5} className="deliveryHeaderCol">出发时间</Col>
                            </Row>
                            <div className="itemContainerStyle">
                                {
                                    this.state.data1.length > 0 ?
                                        this.state.data1.map((item, index) => {
                                            return (
                                                <DeliveryList data={item} key={index}/>
                                            )
                                        }) : <div style={{textAlign: 'center', marginTop: '10px'}}>无数据</div>
                                }
                            </div>
                        </Col>
                        <Col span={6} className="deliveryItem">
                            <Row className="deliveryType">
                                送市场
                            </Row>
                            <Row className="deliveryHeader">
                                <Col span={9} className="deliveryHeaderCol">物流单号</Col>
                                <Col span={5} className="deliveryHeaderCol">跟车人</Col>
                                <Col span={4} className="deliveryHeaderCol">司机</Col>
                                <Col span={6} className="deliveryHeaderCol">出发时间</Col>
                            </Row>
                            <div className="itemContainerStyle">
                                {
                                    this.state.data2.length > 0 ?
                                        this.state.data2.map((item, index) => {
                                            return (
                                                <DeliveryList2 data={item} key={index}/>
                                            )
                                        }) : <div style={{textAlign: 'center', marginTop: '10px'}}>无数据</div>
                                }
                            </div>
                        </Col>
                        <Col span={6} className="deliveryItem">
                            <Row className="deliveryType">
                                托运
                            </Row>
                            <Row className="deliveryHeader">
                                <Col span={9} className="deliveryHeaderCol">物流单号</Col>
                                <Col span={5} className="deliveryHeaderCol">跟车人</Col>
                                <Col span={4} className="deliveryHeaderCol">司机</Col>
                                <Col span={6} className="deliveryHeaderCol">出发时间</Col>
                            </Row>
                            <div className="itemContainerStyle">
                                {
                                    this.state.data3.length > 0 ?
                                        this.state.data3.map((item, index) => {
                                            return (
                                                <DeliveryList3 data={item} key={index}/>
                                            )
                                        }) : <div style={{textAlign: 'center', marginTop: '10px'}}>无数据</div>
                                }
                            </div>
                        </Col>
                        <Col span={5} className="deliveryItem">
                            <Row className="deliveryType">
                                快递
                            </Row>
                            <Row className="deliveryHeader">
                                <Col span={8} className="deliveryHeaderCol">订单号</Col>
                                <Col span={8} className="deliveryHeaderCol">快递号</Col>
                                <Col span={8} className="deliveryHeaderCol">物流公司</Col>
                            </Row>
                            <div className="itemContainerStyle">
                                {
                                    this.state.data4.length > 0 ?
                                        this.state.data4.map((item, index) => {
                                            return (
                                                <DeliveryList1 data={item} key={index}/>
                                            )
                                        }) : <div style={{textAlign: 'center', marginTop: '10px'}}>无数据</div>
                                }
                            </div>
                        </Col>
                    </Spin>
                </Row>
            </div>
        )
    };

    componentDidMount() {
        this.handleGetStorageList();
        this.timer = setInterval(() => this.handleGetStorageList(), 1000 * 60 * 1);
    };

    componentWillUnmount() {
        clearInterval(this.timer);
        this.setState = (count, callback) => {
            return;
        }
    };

    /**
     * 获取待配送列表
     */
    handleGetStorageList() {
        let id = this.props.match.params.id;
        //this.setState({loading: true});
        app.post(orderList.SEARCH_CARLIST, {stock_id: id, car_status: '1', page: 1, size: 1000}).then((result) => {
            if (result.code === 1) {
                let data = result.data.dataSet;
                for (let i = 0; i < data.length; i++) {
                    data[i].car_start_time = data[i].car_start_time == null ? '' : moment(data[i].car_start_time).format("YYYY-MM-DD HH:mm");
                }
                this.setState({data1: data});
            } else {
                this.setState({data1: []});
            }
        });
        app.post(orderList.SEARCH_CARLIST1, {stock_id: id, car_status: '1', page: 1, size: 1000}).then((result) => {
            if (result.code === 1) {
                let data = result.data.dataSet;
                for (let i = 0; i < data.length; i++) {
                    data[i].car_start_time = data[i].car_start_time == null ? '' : moment(data[i].car_start_time).format("YYYY-MM-DD HH:mm");
                }
                this.setState({data2: data});
            } else {
                this.setState({data2: []});
            }
        });
        app.post(orderList.SEARCH_CARLIST2, {stock_id: id, car_status: '1', page: 1, size: 1000}).then((result) => {
            if (result.code === 1) {
                let data = result.data.dataSet;
                for (let i = 0; i < data.length; i++) {
                    data[i].car_start_time = data[i].car_start_time == null ? '' : moment(data[i].car_start_time).format("YYYY-MM-DD HH:mm");
                }
                this.setState({data3: data});
            } else {
                this.setState({data3: []});
            }
        });
        app.post(orderList.SEARCH_CATLIST3, {stock_id: id, car_status: '1', page: 1, size: 1000}).then((result) => {
            if (result.code === 1) {
                let data = result.data.dataSet;
                this.setState({data4: data});
            } else {
                this.setState({data4: []});
            }
        });
    }
};

/**
 * 订单子组件
 */
class DeliveryList extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    };

    render() {
        const {car_no, car_follow_name, car_driver_name, route_name, car_start_time} = this.props.data;
        return (
            <Row className="deliveryTableContainer">
                <Col span={7} className="deliveryTableContainerCol" title={car_no}>{car_no}</Col>
                <Col span={5} className="deliveryTableContainerCol" title={car_follow_name}>{car_follow_name}</Col>
                <Col span={4} className="deliveryTableContainerCol" title={car_driver_name}>{car_driver_name}</Col>
                <Col span={3} className="deliveryTableContainerCol" title={route_name}>{route_name}</Col>
                <Col span={5} className="deliveryTableContainerCol timerItem" title={car_start_time}>{car_start_time}</Col>
            </Row>
        )
    };
}

class DeliveryList2 extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    };

    render() {
        const {car_no, car_follow_name, car_driver_name, car_start_time} = this.props.data;
        return (
            <Row className="deliveryTableContainer">
                <Col span={9} className="deliveryTableContainerCol" title={car_no}>{car_no}</Col>
                <Col span={5} className="deliveryTableContainerCol" title={car_follow_name}>{car_follow_name}</Col>
                <Col span={4} className="deliveryTableContainerCol" title={car_driver_name}>{car_driver_name}</Col>
                <Col span={6} className="deliveryTableContainerCol timerItem" title={car_start_time}>{car_start_time}</Col>
            </Row>
        )
    };
}

class DeliveryList3 extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    };

    render() {
        const {car_no, car_follow_name, car_driver_name, car_start_time} = this.props.data;
        return (
            <Row className="deliveryTableContainer">
                <Col span={9} className="deliveryTableContainerCol" title={car_no}>{car_no}</Col>
                <Col span={5} className="deliveryTableContainerCol" title={car_follow_name}>{car_follow_name}</Col>
                <Col span={4} className="deliveryTableContainerCol" title={car_driver_name}>{car_driver_name}</Col>
                <Col span={6} className="deliveryTableContainerCol timerItem" title={car_start_time}>{car_start_time}</Col>
            </Row>
        )
    };
}

class DeliveryList1 extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    };

    render() {
        const {output_num, car_express_num, car_logistics_name} = this.props.data;
        return (
            <Row className="deliveryTableContainer">
                <Col span={8} className="deliveryTableContainerCol1" title={output_num}>{output_num}</Col>
                <Col span={8} className="deliveryTableContainerCol1" title={car_express_num}>{car_express_num}</Col>
                <Col span={8} className="deliveryTableContainerCol1 timerItem" title={car_logistics_name}>{car_logistics_name}</Col>
            </Row>
        )
    };
}

export default Delivery;